Ajoutez le texte suivant aux styles personnalisés de votre site Vignette :

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker'); :root{ --skewX:-5deg; --skewY:-5deg; } html{ background:#262626!important; } #back{ &::after{ pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 17%,rgba(0,0,0,1) 100%); content: ''; display: block; height: 115%; position: absolute; top: -15%; left: 0; width: 100%; } } @keyframes pulsate { 100% { filter:drop-shadow(0px 0px 15px #f008b7); opacity:.1; } 40% { filter:drop-shadow(0px 0px 12px #f008b77d); opacity:.8; } 0% { filter:drop-shadow(0px 0px 25px #f008b7); opacity:1; }} @keyframes vAnim { 0% { transform: translateY(200px) skew(var(--skewX),var(--skewY)); opacity: 0; } 100% { transform: translateX(0) skew(var(--skewX),var(--skewY)); opacity: 1; } } #banner{ .s{ font-size: clamp(40px,var(--fst),60px)!important; } font-family: 'Permanent Marker', sans-serif; font-variant: small-caps; transform: skew(-11deg,-11deg); background-image: -webkit-linear-gradient(#FF0FF8 0%, #F9F9F7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 2px 20px #f008b7); animation: pulsate 4s ease-in-out infinite alternate; } #banner:after { content: '-'; position: absolute; transform: scaleX(10.5) translate(5%, 35%); background-image: -webkit-linear-gradient(#FF0FF8 0%, #FC96FC 100%); -webkit-background-clip: text; } .nav{ transform: skew(var(--skewX),var(--skewY))!important; } .vignette{ --bs: inset 0px 0px 42px #d14fd1!important; background:#cd8fc40f!important; border-radius:15px; border: 0.2rem solid #ff9eff; border-radius: 2rem; filter: drop-shadow(0px 0px 15px #f008b7); font-size: 1.2rem; color: #fff !important; box-shadow: inset 0px 0px 42px #ff9eff9c, inset 0px 0px 0px #160716d6; overflow: hidden!important; animation: vAnim 900ms cubic-bezier(0.14, 1, 0.14, 1) 100ms 1 forwards !important; -webkit-animation: vAnim 900ms cubic-bezier(0.14, 1, 0.14, 1) 100ms 1 forwards !important; &::after { pointer-events:none; box-shadow: var(--bs); content: ''; display: block; height: 100%; position: absolute; top: 0; left:0; width: 100%; } } @media (max-width: 900px) { :root{ --col-pt: 45px!important; } #banner{ transform: skew(-11deg,-11deg); -webkit-transform: skew(-11deg,-11deg); } } @media (max-width: 600px) { .vignette{ width: calc(100% - 60px)!important; } }

la grille

Pratique pour un portfolio ou un catalogue.

La mise en page sous forme de grille permet un arrangement d'éléments de même largeur

Ils seront arrangés vers le haut de la page